<template>
  <transition name="page">
    <div class="activation-wrap">
      <component-back :title="title"></component-back>
      <div class="input-wrap">
        <input type="text"
               placeholder="请输入激活码"
               border-1px
               ref="input">
      </div>
      <compontne-button :content="submit"
                        @submit="handleSubmit"
                        class="activation"></compontne-button>
    </div>
  </transition>
</template>
<script>
import ComponentBack from 'common/back'
import CompontneButton from 'common/button'
import {
  Toast
} from 'vant'
export default {
  name: 'Activation',
  components: {
    ComponentBack,
    CompontneButton
  },
  data () {
    return {
      title: '激活卡卷',
      submit: '激活'
    }
  },
  methods: {
    handleSubmit () {
      const text = this.$refs.input.value
      const msg = '激活码不能为空'
      if (text === '') {
        Toast({
          message: msg,
          duration: 1000,
          forbidClick: true
        })
      } else {
        this.postActivation(text)
      }
    },
    postActivation (text) {
      this.$api.person.postActivation({ card_no: text })
        .then(this.postActivationSucc)
    },
    postActivationSucc (res) {
      const CODE_OK = this.$api.CODE_OK
      const LOGIN_CODE = this.$api.LOGIN_CODE
      res = res.data
      if (res.code === CODE_OK) {
        const msg = res.msg
        this.$refs.input.value = ''
        Toast({
          message: msg,
          duration: 1000,
          forbidClick: true
        })
        setTimeout(() => {
          this.$router.push({
            path: '/me/like'
          })
        }, 2000)
      } else if (res.code === 0) {
        const msg = res.msg
        Toast({
          message: msg,
          duration: 1000,
          forbidClick: true
        })
        this.$refs.input.value = ''
      } else if (res.code === LOGIN_CODE) {
        this.$reLogin()
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.activation-wrap
  position absolute
  z-index 10
  top 0
  left 0
  bottom 0
  right 0
  background-color $common_bgc
  touch-action none

  .input-wrap
    padding()
    padding-top 108px
    display flex
    align-items center

    input
      flex 1
      height 96px
      display flex
      align-items center
      padding 10px
      box-sizing border-box
      margin-right 10px
      background-color #fff
      border-radius 10px
      font-size $common_fz
      color $common_fz_color

    .activation
      width 100px
      height 96px
      line-height 96px
      text-align center
      box-sizing border-box
      color #ffffff
      background-color $tab_active
      border none
      font-size $shop_name

.page-enter-active, .page-leave-active
  transition all 0.3s

.page-enter, .page-leave-active
  transform translate3d(100%, 0, 0)
</style>
